<template>
	<div class="shequ-box">
		<div class="shequ-title">
			<ul class="shequ-title-left">
				<li style="color: #000;"><a href="/" style="color: #000;">首页 </a> </li>				
				<li>></li>
				<li style="color: #000000;">社区</li>
			</ul>
			<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/menu.png"/>
		</div>
		<div class="shequ-center">
			<div class="shequ-center-item" v-for="sq in itemsSq">
				<div class="shequ-item-img">
					<router-link to="/shequEji">
						<img :src="sq.image"/>
					</router-link>
				</div>
				<div class="shequ-item-bottom">
					
						<img :src="sq.head_img"/>
					
					<div class="shequ-bottom-right">
						<p>{{ sq.nick }}</p>
						<span>{{ sq.create_time }}</span>
					</div>
				</div>				
			</div>
			<router-view></router-view>
		</div>
		
	</div>
</template>

<script>
	import Vue from 'vue'
	export default {
			data(){
				return{
					itemsSq:[]
				}
			},
			mounted (){
				fetch("./static/shequShuju.json").then(function(res){
					return res.json();
				})
				.then((res)=>{
					this.itemsSq=res.data.data;					
				})
			}
		}
</script>

<style>
	.shequ-box{
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;	
			z-index: 99;	
			background: #eee;
			overflow-y: scroll;			
		}
	.shequ-title{
			width: 100%;
			display: flex;
			background: #fff;
		    color: #333;
		    justify-content: space-between;	
		    position: fixed;
		    z-index: 99;	    
		}	
	.shequ-title-left{
			display: flex;
			color: #333;
		    padding-left: 0.2rem;
		    font-size: .3rem;
		    height: .8rem;
		    line-height: .8rem;
		    width: 85%;
		}
	.shequ-title img{
			width: .6rem;
			height: .6rem;
			margin-top: .1rem;
		}
	.shequ-center{
			width: 100%;
			height: 100%;
			margin-top: 1rem;
			background: #fff;
			display: flex;
			flex-flow: wrap row;
			justify-content: flex-start;
			
		}
	.shequ-center-item{
			width: 50%;
			background:#fff;
			border: .002rem solid #eee;
		}
	.shequ-item-img img{
			width: 100%;
		}
	.shequ-item-bottom{
			width: 100%;
			display: flex;
		}	
	.shequ-item-bottom img{
			width: .6rem;
			height: .6rem;
		}
	.shequ-bottom-right{
			display: flex;
			flex-direction:column ;
	}
	.shequ-bottom-right span{
			color: #888;
			font-size: .2rem;
	}
</style>